<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单案例</title>
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
        }

        tr,
        td,
        th {
            border: 1px solid black;
        }


        form {
            width: 270px;
            height: 180px;
            border: 1px solid black;
            margin-top: 50px;
            text-align: center;
        }

        h3 {
            text-align: left;
            text-indent: 15px;
        }

        b {
            margin-left: -10px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th></th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <form action="">
        <h3>添加新员工</h3>
        <b>name:</b><input type="text" id="name"><br>
        <b>email:</b><input type="text" id="email"><br>
        <b>salary:</b><input type="text" id="salary"><br>
        <input type="button" value="Submit" id="submit">
    </form>
</body>
<script>
    //1.先准备好员工的数据
    var datas = [{
        name: 'Tom',
        email: 'tom@tom.com',
        salary: 5000
    }, {
        name: 'Jerry',
        email: 'jerry@sohu.com',
        salary: 8000
    }, {
        name: 'Bob',
        email: 'bob@tom.com',
        salary: 10000
    }];
    //2.往tbody里面创建行，有几个人（通过数组的长度）我们就创建几行
    var tbody = document.querySelector('tbody');
    for (var i = 0; i < datas.length; i++) { //外面的for循环管行
        //创建tr行
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        //行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
        for (var k in datas[i]) { //里面的for循环管列td
            //创建单元格
            var td = document.createElement('td');
            //把对象里面的属性值 给td
            // console.log(datas[i][k]);
            td.innerHTML = datas[i][k];
            tr.appendChild(td);
        }
        // 3.单独创建删除单元格
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">Delete</a>';
        tr.appendChild(td);
    }
    // for(var k in obj){
    //     k得到的是属性名
    //     obj[k]得到的是属性值
    // }
    // 4.删除
    var as = document.querySelectorAll('a');
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            //点击a标签 删除a标签所在的行（a链接爸爸的爸爸） node.removeChild（child）
            tbody.removeChild(this.parentNode.parentNode);
        }
    }
    //点击提交表格新增一行
    submit.onclick = function () {
        var submit = document.getElementById('submit');
        var name = document.getElementById('name').value;
        // console.log(name);
        var email = document.getElementById('email').value;
        var salary = document.getElementById('salary').value;
        var arr = [name, email, salary];
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        for (var i = 0; i < arr.length; i++) {
            var td = document.createElement('td');
            td.innerHTML = arr[i];
            tr.appendChild(td);
        }
        // 3.单独创建删除单元格
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">Delete</a>';
        tr.appendChild(td);
        //点击a标签删除
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                //点击a标签 删除a标签所在的行（a链接爸爸的爸爸） node.removeChild（child）
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
        alert('添加成功');
    }
</script>

</html>